<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="mvc" uri="http://www.trkj.com/mvc/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>收藏夹</title>
<style type="text/css">
	.dindan{
		height:40px;
		width:80px;
		text-align:center;
		line-height:40px;
		color:#555;
		background-color:#f0f0f0;
		font-size: 14px;
		font-weight: 700;
	}
	.dindanhezi{
		height:40px;
		width:900px;
		border-bottom:1px solid #f0f0f0;
		margin-left:330px;
		text-align:left;
	}
	.picture{
		height:320px;
		width: 220px;
		border: 1px solid #DEDEDE;
	}
	
	.goodsbody{
				height:170px;
				width: 180px;
				margin-left: 18px;
				margin-top: 10px;
			}
			.goodspic{
				height:170px;
				width: 180px;
			}
			.goodsfoot{
				height: 45px;
				width: 180px;
				margin-left:10px;
				margin-top: 15px;
				font-size: 14px;
			}
			.goodsfooter{
				height: 36px;
				width: 220px;
				margin-top: 10px;
				margin-left:10px;
			}
			
			.goodsprice{
				color: #CA151D;
				padding-left:60px;
				line-height: 30px;
				font-weight: 700;
				font-size: 18px;
			}
			.goodsprice2{
				color: #555;
				padding-left: 70px;
				line-height: 20px;
				font-size: 14px;
			}
			.goods_list ul li{
				float: left;
				list-style: none;
				margin:0px 10px;
			}
			.goods_list{
				height:auto;
			}
			.goods_list ul li .goods_list_btnbox{
				position:relative;
				left: 0px;
				bottom: 2px;
				height: 36px;
				width: 100%;
				background: #f36f72;
				display: none;
				overflow: hidden;
				line-height: 36px;
				text-align: center;
			}
			
			.goods_list ul li .goods_list_btnbox .add_cart{
				height: 100%;
				width: 100%;
				font-size: 13px;
				color: white;
				float: left;
			}
			.goods_list ul li .goods_list_btnbox .del_fav{
				height: 100%;
				width: 35%;
				font-size: 13px;
				color: white;
				background: #ca151d;
				float: left;
				display: block;
			}
			.del_fav a:hover{
				color:white;
			}
			.del_fav a{
				color:white;
			}
	.pager1{
		padding-left:330px;
		float:left;
		padding-top:30px;
	}

	.pager1 a, .btn{
	text-decoration: none;
	color: gray;
	border: 1px solid gray;
	border-radius: 5px;
	font-size: 14px;
	padding: 3px 8px;
	margin-left: 4px;
	}
	
	.pager1 a:HOVER , .btn:HOVER{
	background: gray;
	color: white;
	}
	.hfavoritebody{
		height:570px;
		margin-top:50px;
	}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".picture").mousemove(function(){
		$(this).children("div").show();
		$(this).css("border", "1px solid #CA151D");
	});
	$(".picture").mouseleave(function(){
		$(".goods_list ul li .goods_list_btnbox").hide();
		$(".picture").css("border", "1px solid #DEDEDE");
	});
	$(".goods_list_btnbox").mousemove(function(){
		$(".add_cart").css("width","65%");
	});
	$(".goods_list_btnbox").mouseleave(function(){
		$(".add_cart").css("width","100%");
	});
	
	
	//删除操作
	$(".del_fav").click(function(){
		if(confirm("是否取消收藏？")){
			var a=$(this);
			$.get("collection?action=deleteColl", {id:a.attr("id")}, function(){
				a.parent().parent().remove();
			});
		}
	});
});
</script>
</head>
<body>
<div ><%@include file="chead.jsp" %></div>
<div class="hfavoritebody" >
<div style="float:left"><%@include file="hppmenu.jsp" %></div>
<div class="dindanhezi">
	<div class="dindan">
		<span>收藏夹</span>	
	</div>
</div>
<div class="goods_list">
			<ul>
			<c:forEach items="${map.list }" var="u" varStatus="vs">   
				<li>
					<div class="picture">
						<div class="goodsbody">
							<img class="goodspic" src="${u.p_newname }" />
						</div>
						<div class="goodsfoot">
							${u.g_name }
						</div>
						<div class="goodsfooter">
							<span id="goodsprice" class="goodsprice">￥${u.g_price }</span><br/>
							<span class="goodsprice2"><s>￥${u.g_price }</s></span>
						</div>
						<div class="goods_list_btnbox">
							<div class="add_cart">加入购物车</div>
							<a  class="del_fav" href="collection?action=deleteColl&id=${u.g_code}">取消收藏</a>
						</div>
					</div>					
				</li>
			</c:forEach>
			</ul>
	</div>
	<div class="pager1">
			<mvc:pager url="collection?action=Page" pagesize="${map.pagesize}" count="${map.count }" curpage="${map.curpage }" />
		</div>
</div>
		<!-- 感兴趣的商品 -->
		<div style="padding-top:40px;"><%@include file="hfooter.jsp" %></div>
		<div ><%@include file="cfooter.jsp" %></div>
</body>
</html>